<template>
  <div class="merchants">
		 <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">添加商户信息</span>
      <span class="header-wrap-right"></span>
    </div>
        <!-- 选择商品 -->
    <div v-if="mark">
      <div class="merchants-content">
          <div class="merchants-list" @click="showMerchants" v-if="merchantsName">
              <span>{{merchantsName}}</span>
              <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
          <div class="merchants-list" @click="showMerchants" v-else>
              <span>请选择商户类型</span>
              <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
      </div>
      <!-- 商户名称 -->
      <div class="merchants-content">
          <div class="merchants-list">
              <van-field clearable v-model="name" placeholder="请输入商户名称" />
          </div>
      </div>
      <!-- 商户实际经营地址 -->
      <div class="merchants-content" >
          <div class="merchants-list">
              <van-field clearable v-model="address" placeholder="请输入商品实际经营地址" />
          </div>
      </div>
      <!-- 负责人姓名-->
      <div class="merchants-content">
          <div class="merchants-list">
              <van-field clearable v-model="contacts" placeholder="请输入负责人姓名" />
          </div>
      </div>   
      <!-- 电话号码 -->
      <div class="merchants-content">
          <div class="merchants-list">
              <van-field clearable v-model="mobile" placeholder="请输入电话号码" />
          </div>
      </div> 
          <!-- 选择政治面貌 -->
      <div class="merchants-content" >
        <div class="merchants-list" @click="showmerchants" v-if="merchantsship">
            <span>{{merchantsship}}</span>
            <span><i class="iconfont icon-xiajiantou"></i></span>
        </div>
        <div class="merchants-list" @click="showmerchants" v-else>
            <span>请选择政治面貌</span>
            <span><i class="iconfont icon-xiajiantou"></i></span>
        </div>
      </div>

      <!-- 确定 -->
      <div class="merchants-content" style="margin-top: .7rem;">
          <div class="submit" @click="addVolunteer">
              确定
          </div>
      </div>
        <!-- 社区选择  -->
      <van-popup v-model="PickerMerchants" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="cancel"
          @confirm="onConfirm"
        />
      </van-popup>
      <!-- 关系选择弹窗 -->
      <van-popup v-model="Pickermerchants" position="bottom" >
        <van-picker
          show-toolbar
          :columns="merchantsData" 
          @cancel="cancel"
          @confirm="ConfirmRelationship"
        />
      </van-popup>
    </div>
    <Merchants v-if='show' @getContent="Switching" :listData='StoreData'/>
  </div>
</template>
<script>
import api from '../../api/api.js'
import Merchants from './components/list'
import { Area,Popup,Picker,Dialog,Field } from 'vant';

export default {
  data(){
    return{
        show:false,
        mark:false,
        contacts:'',
        mobile:'',
        address:'',
        name:'',
        listData:[],
        household_name:'',
        merchantsName:'',
        merchantsId: null,
        merchantsshipId:null,
        merchantsship:'',
        address:'',
         PickerMerchants:false,
        Pickermerchants:false,
        columns:[],
      merchantsData:[
        {text:'中共党员',value:1},
        {text:'中共预备党员',value:2},
        {text:'共青团员',value:3},
        {text:'民革党员',value:4},
        {text:'民盟盟员',value:5},
        {text:'民建会员',value:6},
        {text:'民进会员',value:7},
        {text:'农工党党员',value:8},
        {text:'致公党党员',value:9},
        {text:'九三学社社员',value:10},
        {text:'台盟盟员',value:11},
        {text:'无党派人士',value:12},
        {text:'群众',value:13}
      ],
     	sexData:[
        {text:'男',value:1},
        {text:'女',value:2}
      ],
     	homeData:[
        {text:'是',value:1},
        {text:'否',value:2}
      ],
      StoreData:[]
    }
  },
  created(){
    this.getStore()
    this.quarters()
    this.menu()
  },
  methods:{
    menu(){
      window.scrollTo(0, 0)
    },
    Switching(){
        this.show=false
         this.mark=true
    },
    goback(){
      this.$router.go(-1)
    },
    addVolunteer(){
      var reg = /^([1][0-9]{10})$/;
      if(!this.merchantsName){
        this.$toast('请选择商户类型')
        return
      }
      if(!this.name){
        this.$toast('请输入商户名称')
        return
      }
	    if(!this.address){
        this.$toast('请输入实际经营地址')
        return
      }
	    if(!this.contacts){
      this.$toast("请输入负责人姓名");
      return
      }
      if(!this.mobile){
      this.$toast("请输入手机号码");
      return
      }
      if(!reg.test(this.mobile)){
      this.$toast("手机格式不正确");
      return
      }
	    if(!this.merchantsship){
        this.$toast('请选择政治面貌')
        return
      }
      this.$post(api.addStore, {
          name: this.name,
          address: this.address,
          category_id: this.merchantsId,
          policital: this.merchantsshipId,
          mobile: this.mobile,
          contacts:this.contacts
      })
      .then((response) => {
        if(response.data.code===1){
          this.$toast('添加成功!')
          this.getStore()
          }else{
            this.$toast(response.data.msg)
          }
        })
      .catch((error) => {
        console.log(error);
      });
    },
  	//获取商户列表
    getStore(){
      this.$get(api.Store,{})
      .then((response) => {
        console.log('Store',response)
        if(response.data.code==1){
          this.StoreData = response.data.data.list
          if(this.StoreData.length<=0){
            this.mark = true
            this.show = false
          }else{
            this.mark = false
            this.show = true
          }
        }
      })
      .catch((error) => {
        console.log(error);
      });  
    },
	//获取分类列表
    quarters(){
      this.$get(api.Category,{})
      .then((response) => {
        console.log('response',response)
        if(response.data.code==1){
          this.columns = response.data.data.list
            this.columns.forEach((element,index) => {
            this.columns[index].text = element.name
            this.columns[index].textId = element.id
          });
          console.log('分类列表',this.columns)
        }
      })
      .catch((error) => {
        console.log(error);
      });  
    },
    cancel(){
      this.Pickermerchants = false;
      this.PickerMerchants = false;
    },
   showMerchants(){
      this.PickerMerchants = true;
        },
		// 关系确定FN
   showmerchants(){
      this.Pickermerchants = true;
    },
    onConfirm(value) {
      this.merchantsName = value.text
      this.merchantsId = value.id
    //   this.ShowConfirm = true
      this.PickerMerchants = false;
    },
		ConfirmRelationship(value) {
      this.merchantsship = value.text
      this.merchantsshipId = value.value
      this.Pickermerchants = false;
    },

  },
  components:{
    [Area.name]:Area,
    [Popup.name]:Popup,
    [Picker.name]:Picker,
    [Field.name]:Field,
    [Dialog.Component.name]: Dialog.Component,
    Merchants
  }
}
</script>
<style>
.merchants .merchants-list .van-cell{
  background: none;
  color: #000;
  line-height: .55rem;
  padding: .24rem .3rem;
}
.merchants .van-field__control{
  font-size: .28rem;
}
</style>

<style scoped>
.merchants{
    margin-top: 1rem;
}
.list-content{
  display: flex;
  margin:.15rem .2rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: .45rem;
  font-weight: bold;
}
.list-content span{
  flex: 1;
}
.merchants .repairDetail-list{
  margin-bottom: .2rem;
  font-weight: bold;
}
.merchants .repairDetail-list .van-cell{
  background: none;
  padding: .26rem .3rem;
}
.merchants .repairDetail-textarea .van-cell{
  background: #2E294E;
  padding: .15rem .15rem;
  border: 1px solid #57c5c6;
  border-radius: .2rem;
}
.list-title{
	margin-left: .3rem;
}
.van-dialog{
  width: 75%;
}
.merchants-content{
  padding: .35rem .3rem;
  color: #000;
  font-weight: bold;
}
.merchants-title{
  display: block;
  margin-bottom: .2rem;
  font-size: .32rem;
}
.merchants-list{
  background: #fff;
  display: flex;
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  border-radius: .5rem;
  border: 0.02rem solid #ddd;
}
.merchants-list span:nth-of-type(1){
  text-indent: .35rem;
  flex: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.merchants-list span:nth-of-type(2){
  text-align: center;
  flex: 1;
}
.submit{
  color: #fff;
  height: 1rem;
  line-height: 1rem;
  border-radius: .5rem;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, #FFC796 0%, #FD5585 100%);
  border-radius: .45rem;
  text-align: center;
  font-weight: bold;
}
.noticeDetail-tips{
	margin: 0 .5rem;
}
.noticeDetail-tips span{
	line-height: .8rem;
	display: block;
	border-bottom: 1px solid #ccc;
}
</style>
